<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 响应式绑定示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <span :title="message">
                Hover your mouse over me for a few seconds to see my dynamically bound title!
            </span>
        </p>
        
        <p :class="{ red: isRed }" @click="toggleRed">
            This should be red... but click me to toggle it.
        </p>
        
        <p :style="{ color }" @click="toggleColor">
            This should be green, and should toggle between green and blue on click.
        </p>
    </div>

    <script>
        const { createApp, ref } = Vue;

        createApp({
            setup() {
                const message = ref('Hello World!');
                const isRed = ref(true);
                const color = ref('green');

                function toggleRed() {
                    isRed.value = !isRed.value;
                }

                function toggleColor() {
                    color.value = color.value === 'green' ? 'blue' : 'green';
                }

                return {
                    message,
                    isRed,
                    color,
                    toggleRed,
                    toggleColor
                };
            }
        }).mount('#app');
    </script>
    
    <style>
        .red {
            color: red;
        }
    </style>
</body>
</html>